<template>
	<view class="bg">
		<head-navigation :title="'附近的神椰商户'" :is-back="0" :background-color="'#FFF'"
			@getBarHight="getBarHight"></head-navigation>
		<view class="header_box" :style="{ 'top': heightVeiw}">
			<view class="search_but">
				<image class="se_l_img" src="/static/index/search.png" mode="widthFix"></image>
				<view class="se_input_box" v-if="name.length > 0" @click="keyWordinput">
					<view class="se_input_text" @click.stop="">
						<text class="sit_text ellipseHide">{{name}}</text>
						<view class="se_input_text_icon" @click.stop="keyWordClose">
							<uni-icons type="closeempty" size='15' color="#000000"></uni-icons>
						</view>
					</view>
				</view>
				<input v-else class="l_input" :focus="isFocus" v-model="query" @input="inputText" @focus='inputText'
					type="text" confirmType="search" @confirm="onConfirm" placeholder="请输入关键词"
					placeholder-class="placeholderClass" />
				<text class="se_r" @click="search">搜索</text>
			</view>
			<scroll-view style="white-space: nowrap;padding-left: 30rpx;" scroll-x>
				
				<view class="tab" :class="item.id == shopTypeParent?'tabSelector':''" v-for="(item,index) in tabList" :key="index" @click="slelector(item)">{{item.name}}
					
				</view>
				
				<view class="tabLine"></view>
			</scroll-view>
		</view>
		
		<view class="bg_shop">
			<view class="no_info" v-if="shopList.length==0" style="padding-top:320rpx;">
				<image src="/static/my/order_no.png" mode="widthFix" style="width: 400rpx;"></image>
				<text>暂无商户</text>
			</view>
			<view class="shop_content" v-for="(item,index) in shopList" :key="index" @click="jumpDetails(item)">
				<image class="img" :src="item.logo==''?'/static/shop_logo.png':item.logo" mode="aspectFill"></image>
				<view class="c">
					<view class="title ellipseHide">{{item.shortName}}</view>
					<view class="address_content">
						<image class="location_img" src="/static/index/address_2.png" mode="aspectFill"></image>
						<view class="address_content_c ellipseHide_two">
							<text class="address_content_d">{{item.distance}}km</text>
							<text
								class="address_content_address">{{item.address}}</text>
						</view>
					</view>
					<view v-if="item.isConsumption==2" class="xfjf">消费积分</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	import { shenyeParadiseShopLs,
	getShowParentTypeAll} from '@/api/shenyeParadise.js'
	let app = getApp()
	export default {
		data() {
			return {
				latitude: '', //纬度
				longitude: '', //经度
				query:'',//搜索条件
				name: '',
				keyWordStatus: false, //判断是否选择
				isFocus: false, //聚焦
				heightVeiw: 0,
				shopList: [], //店铺列表
				listTotal: 0, //总数
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				tabList: [{
					'id':'',
					'name':'推荐'
				}], //店铺列表
				shopTypeParent:'',
			}
		},
		onLoad() {
			setTimeout(() => {
				this.getLocation()
				this.getShowParentTypeAll()
			}, 500)
			this.isToken = (this.$queue.getData('token') != undefined && this.$queue.getData('token') != '') ? true : false
		},
		methods: {			
			async getLocation() {
				let that = this
				uni.showLoading({
					title: '获取定位中',
					mask: true
				})
				try{
					var res = await this.$queue.getLocation()
					that.latitude = res.latitude
					that.longitude = res.longitude
					that.getShopList()
				}catch(e){
					that.pageNum = 1
					that.getShopList()
				}
				setTimeout(res => {
					uni.hideLoading()
				}, 4000)
			},
			async getShopList() { //查询店铺列表
				console.log('店铺请求')
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					lat: this.latitude,
					lnt: this.longitude,
					query: this.query,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					shopTypeParent:this.shopTypeParent,
				}
				try {
					const res = await shenyeParadiseShopLs(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.shopList = this.shopList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.shopList = res.result.records
					}
				} catch {
					
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			async getShowParentTypeAll(){
				const res = await getShowParentTypeAll();
				this.tabList = this.tabList.concat(res.result)
			},
			slelector(item){
				this.shopList = []
				this.shopTypeParent = item.id
				this.pageNum = 1
				this.getShopList()
			},
			// 获取高度
			getBarHight(e) {
				console.log('heightVeiw', e)
				this.heightVeiw = e
			},
			// 输入框监听焦点 监听用户输入
			inputText() {
				if (this.query == '') {
					this.keyWordStatus = false
				}
			},
			blurInput(){ //输入框失去焦点时
				this.pageNum = 1
				this.getShopList()
			},
			keyWordinput() {
				// this.keyWordStatus = false
				this.name = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.$set(this, 'isFocus', true);
					}, 200)
				})
			},
			search() {
				// 初始化参数
				this.shopList = []
				this.pageNum = 1
				this.listTotal = 0
				this.keyWordStatus = true
				this.name = JSON.parse(JSON.stringify(this.query)); //深拷贝
				this.getShopList()
			},
			keyWordClose() {
				this.query = ''
				this.name = ''
				this.shopList = []
				this.pageNum = 1
				this.getShopList()
				this.keyWordStatus = false
				this.$nextTick(() => {
					setTimeout(() => {
						this.$set(this, 'isFocus', true);
					}, 200)
				})
			},
			onConfirm(event) {
				console.log("点击完成按钮", JSON.stringify(event.detail));
				const d = JSON.parse(JSON.stringify(event.detail));
				this.query = d.value
				this.search()
			},
			jumpDetails(e){
				uni.navigateTo({
					url:'/pages/merchant/merchantDetail?id='+e.id + '&distance=' + e.distance
				})
			},
			// 页面上拉触底事件的处理函数
			onReachBottom: function() {
				// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
				if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
					// this.moreShop = 'noMore'
				} else {
					// this.moreShop = 'more'
					this.pageNum++; //每触底一次 page + 1;
					this.getShopList()
				}
			}
		}
	}
</script>

<style>
	.bg {
		background-color: #F5F8FE;
		min-height: 100vh;
	}

	.header_box {
		position: fixed;
		left: 0;
		width: 100%;
		background-color: #F5F8FE;
		z-index: 99;
	}

	/* 搜索按钮 */
	.search_but {
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 0 30rpx 0 26rpx;
		box-sizing: border-box;
		width: 690rpx;
		height: 64rpx;
		margin: 20rpx auto;
	}

	.se_l {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.se_l_img {
		width: 36rpx;
		height: 36rpx;
		margin-top: 4rpx;
		margin-right: 12rpx;
	}

	.l_input,
	.se_input_box {
		flex: 1;
		/* 	display: flex;
	flex-direction: row;
	align-items: center; */
	}

	.slb_input {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.se_input_text {
		width: fit-content;
		background: #F6F6F6;
		border-radius: 200rpx;
		padding: 6rpx 22rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.se_input_text .sit_text {
		max-width: 380rpx;
	}

	.se_input_text_icon {
		padding-left: 26rpx;
	}

	.l_input {
		margin-right: 26rpx;
	}

	.se_r {
		color: #7B7B7B;
		margin-left: 40rpx;
		font-size: 28rpx;
	}

	/deep/ .placeholderClass {
		color: #CACACA;
		font-size: 28rpx;
	}

	/* end */

	.tab {
		margin: 10rpx 34rpx 20rpx 0;
		padding: 12rpx 30rpx 14rpx 30rpx;
		background-color: #fff;
		border-radius: 8rpx;
		font-size: 24rpx;
		display: inline-block;
		position: relative;
		color: #555;
	}

	.tabSelector{
			margin: 10rpx 34rpx 20rpx 0;
			padding: 12rpx 30rpx 14rpx 30rpx;
			background-color: #FFEFEF;
			border-radius: 8rpx;
			font-size: 24rpx;
			display: inline-block;
			position: relative;
			color:#FF2521;	
	}
	.tabLine {
		width: 34rpx;
		height: 1rpx;
		display: inline-block;
		position: relative;
	}

	.bg_shop {
		margin-top: 200rpx;
	}

	.shop_content {
		box-shadow: 0rpx 0rpx 16rpx 0rpx #EAEAEA;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 22rpx 20rpx 22rpx 24rpx;
		margin: 0 30rpx 30rpx;
		display: flex;
		flex-direction: row;
	}

	.shop_content .img {
		width: 204rpx;
		height: 164rpx;
		border-radius: 8rpx;
	}

	.shop_content .c {
		display: flex;
		flex-direction: column;
		width: 426rpx;
		margin-left: 16rpx;
	}

	.shop_content .title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.shop_content .address_content {
		display: flex;
		flex-direction: row;
		font-size: 24rpx
	}

	.shop_content .address_content .location_img {
		width: 24rpx;
		height: 24rpx;
		border-radius: 8rpx;
		margin-top: 16rpx;
	}

	.address_content_c {
		flex: 1;
		margin-top: 12rpx;
		margin-left: 6rpx;
	}

	.address_content_d {
		color: #FF2521;
		margin-right: 8rpx;
	}

	.address_content_address {
		color: #222;
	}

	.xfjf {
		border: 2rpx solid #64A8FB;
		border-radius: 8rpx;
		color: #64A8FB;
		font-size: 20rpx;
		width: 110rpx;
		padding: 2rpx 0 4rpx 0;
		text-align: center;
		margin-left: 15rpx;
		margin-top: 12rpx;
	}
</style>